/**
 * 第 4 讲
 */

import React from 'react'

export default class Home4 extends React.Component {
  constructor() {
    super()

    this.state = {
      msg: '第1、4种 home 3 - 组件',
      userName: '第2种 - srxboys',
      message: '第3种 - 我是 message',
    }

    this.getUserName = this.getUserName.bind(this)
  }

  run() {
    alert('我是一个run方法')
  }

  getData() {
    alert(this.state.msg)
  }

  getUserName () {
    alert(this.state.userName)
  }

  getMessage = () => {
    alert(this.state.message)
  }

  setDate() {
    const date = new Date()
    this.setState({
      msg: 'msg 以改变成:' + date
    })
  }

  setDateValue(value) {
    value = value || 'unknow'
    this.setState({
      msg: value
    })
  }

  setDateBindValue(value) {
    value = value || 'bind-unknow'
    this.setState({
      msg: value
    })
  }

  setDateBindValues(v1, v2) {
    v1 = v1 || 'bind-unknow'
    v2 = v2 || 'bind-unknow'
    this.setState({
      msg: v1 + v2
    })
  }

  render() {
    return (
      <div>
        <h2>{this.state.msg}</h2>
        <br />
        <button onClick={this.run}>执行方法</button>
        <br /><br />
        {/* <button onClick={this.getData}>获取数据</button>
        <br /><hr /><br />
        <button onClick={this.getData.bind(this)}>获取数据 - 第1种-改变this</button>
        <br /><br />
        <button onClick={this.getUserName}>获取数据 - 第2种-改变this</button>
        <br /><br />
        <button onClick={this.getMessage}>获取数据 - 第3种-改变this</button>
        <br /><br />
        <button onClick={() => this.getData()}>获取数据 - 第4种-改变this</button> */}
        <hr />
        <br />
        <button onClick={() => this.setDate()}>改变state.msg值</button>
        <br /><br />
        <button onClick={() => this.setDateValue('张三')}>改变state.msg值 张三</button>
        <button onClick={this.setDateBindValue.bind(this, '李四')}>改变state.msg值 李四</button>
        <button onClick={this.setDateBindValues.bind(this, '张三', '李四')}>改变state.msg值 张三、李四</button>
        <hr />
        <br /><br />
      </div>
    )
  }
}